<template>
	<view class="tabbar">
		<view class="tabbar-content">
			<view class="li" v-for="(item,index) in tabBarList" :key="index" @click="tabbarClick(item,index)">
				<image :class="['image',tabBarList.length == 5 && index == 2?'image-radius':'']"
					:src="current == index?item.selectedIconPath:item.iconPath" mode="aspectFit"></image>
				<view :class="['li-text',current == index?'li-text-select':'']">{{item.text}}</view>
				<view class="li-number" v-if="shopCartNumber != 0"></view>
			</view>
			<view :class="['notice u-flex-center u-col-center',agent_apply_is_notify.status == 1?'notice-j':'']"
				:style="{backgroundImage:`url(${agent_apply_is_notify.status == 1?noticeBackJ:noticeBack})`}"
				v-if="agent_apply_is_notify != null">
				{{agent_apply_is_notify.status == 1?'您的代理审核已通过 请添加微信完成升级':'您的代理未通过 请修改资料！'}}
			</view>
			<view class="coupon-remind u-flex-center u-col-start"
				v-if="isLogin && isCouponRemind && userInfo.coupon_count > 0"
				:style="{backgroundImage:`url(${couponRemind})`}">你还有{{userInfo.coupon_count}}张优惠券未使用</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				badgeStyles: {
					top: 0,
					right: '8px'
				},
				noticeBack: 'https://qn.mtj.cdydsy.com/user_client/image/notice-h.png',
				noticeBackJ: 'https://qn.mtj.cdydsy.com/user_client/image/notice-j.png',
				couponRemind: 'https://qn.mtj.cdydsy.com/user_client/image/coupon-reminds.png',
				duration: 20000, // 默认定时器的持续时间
				closeTimer: null, // 定时器引用
			};
		},
		computed: {
			...mapState({
				systemConfig: state => state.init.systemConfig,
				shopCartNumber: state => state.shopCart.shopCartNumber,
				isSettings: state => state.init.isSettings,
				subTemplateIds: state => state.init.subTemplateIds,
				tabBarList: state => state.tabbar.tabBarList,
				current: state => state.tabbar.current,
				agent_apply_is_notify: state => state.init.agent_apply_is_notify,
				isCouponRemind: state => state.init.isCouponRemind,
				userInfo: (state) => state.user.userInfo,
				isLogin: (state) => state.user.isLogin,
			})
		},
		mounted() {
			this.startCloseTimer(this.duration);
		},
		watch: {
			tabBarList: {
				handler(newVal) {
					if (newVal.length === 0) return
					let pages = getCurrentPages();
					let currentPage = pages[pages.length - 1].route;
					this.getIndex(currentPage)
				},
				immediate: true
			}
		},
		methods: {
			...mapMutations('tabbar', ['setCurrent']),
			...mapMutations('init', ['setAgentApplyIsNotify', 'setCouponRemind']),
			getIndex(route) {
				const path = `/${route}`
				const index = this.tabBarList.findIndex(item => item.pagePath === path);
				if (index !== -1) {
					this.setCurrent(index)
				} else {
					this.setCurrent(0)
				}
			},
			tabbarClick(item, index) {
				this.setCurrent(index)
				this.$switchTab(item.pagePath)
				if (index == 2) {
					this.setAgentApplyIsNotify(null)
				}
				if (this.isCouponRemind) {
					this.setCouponRemind(true);
					// 取消当前定时器
					this.clearCloseTimer();
					// 设置新的定时器
					this.startCloseTimer(this.duration);
				}
			},
			startCloseTimer(time) {
				// 使用当前组件的this上下文来引用closeTimer
				this.closeTimer = setTimeout(() => {
					this.setCouponRemind(false);
				}, time);
			},
			clearCloseTimer() {
				// 清除之前设置的定时器
				if (this.closeTimer) {
					clearTimeout(this.closeTimer);
					this.closeTimer = null; // 将closeTimer置为null，表示没有正在运行的定时器
				}
			},
			beforeDestroy() {
				this.clearCloseTimer(); // 在组件销毁前清除定时器
			},
		}
	};
</script>

<style lang="scss" scoped>
	.tabbar {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		z-index: 9999;

		.tabbar-content {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			height: 140rpx;
			position: relative;

			.li {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;
				padding: 20rpx 0 40rpx;

				.li-number {
					width: 12rpx;
					height: 12rpx;
					position: absolute;
					top: 20rpx;
					right: 190rpx;
					border-radius: 50%;
					background-color: #CC242B;
				}
			}

			.notice {
				padding: 22rpx 24rpx 16rpx 20rpx;
				box-sizing: border-box;
				width: 230rpx;
				height: 88rpx;
				font-size: 20rpx;
				color: #6A6A6A;
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				top: -80rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.notice-j {
				color: #956917;
			}

			.coupon-remind {
				width: 215rpx;
				height: 50rpx;
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				right: 38rpx;
				top: -37rpx;
				font-size: 18rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}

			.image {
				width: 42rpx;
				height: 42rpx;
				display: block;
			}

			.image-radius {
				width: 58rpx;
				height: 58rpx;
				display: block;
				border-radius: 50%;
			}

			.li-text {
				font-size: 24rpx;
				color: #606266;
				padding-top: 6rpx;
			}

			.li-text-select {
				color: $base-color;
			}
		}
	}
</style>